<template>
	<div class="MYIntegral">
		<header>
      <div class="left"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a></a></div>
    </header>

		<main class="main">
			<div class="sumss">
				<div class="iconTex">
					<div class="sum">
						<p>500分</p>
						<span>小积分，有大用，多攒一些囤起来</span>
					</div>				
				</div>
				<ul class="detail">
					<li class="verImg1">
						<p><img src="../assets/img/m1.png" ><span>{{detail}}</span></p>
					</li>
					<router-link to = 'record'>
						<li class="verImg2">
							<p><img src="../assets/img/m51.png"><span>{{convert}}</span></p>
						</li>
					</router-link>
				</ul>
			</div>			

			<div class="iconList">
				<div class="title">{{title}}</div>
				<ul class="listMenu">
					
						<li>
							<div class="picTex">
								<figure>
									<img src="../assets/img/m14.png">
									<span>兑换现金</span>
								</figure>
								<article>
									<time>2017-04-26<i>10:00</i></time>																
								</article>
							</div>
							<p>-100</p>
						</li>

						<li>
							<div class="picTex">
								<figure>
									<img src="../assets/img/m15.png">
									<span>邀请好友</span>
								</figure>
								<article>
									<time>2017-04-26<i>10:00</i></time>																
								</article>
							</div>
							<p>+100</p>
						</li>

						<li>
							<div class="picTex">
								<figure>
									<img src="../assets/img/m15.png">
									<span>实名登记</span>
								</figure>
								<article>
									<time>2017-04-26<i>10:00</i></time>																
								</article>
							</div>
							<p>+200</p>
						</li>

						<li>
							<div class="picTex">
								<figure>
									<img src="../assets/img/m15.png">
									<span>注册成功</span>
								</figure>
								<article>
									<time>2017-04-26<i>10:00</i></time>																
								</article>
							</div>
							<p>+300</p>
						</li>
					

					
				</ul>
				<div class="kong"></div>
			</div>

			
		</main>

	</div>
</template>

<script>
	export default {
		name: 'integralShopping',
	    data () {
	      return {
	        msg: '我的积分',
	        detail: '积分明细',
	        convert: '兑换记录',
	        title: '积分明细'	        
	      }
	    }
	}

</script>

<style scoped lang="less">
	@import  '../assets/css/reset.css';
	@import  '../assets/css/common.less';

	.MYIntegral{
		background: #f7f7f9;
		height: 100%;
		color:rgba(0,0,0,0.9);
		font-family: "平方";
		font-weight: bold;		
		.header{
			position: fixed;
		    width: 100%;
		    top: 0;
			.px2rem (height,114);
			background: white;
			display: flex;
	        justify-content: center;
	        align-items: center;
	        .px2rem (font-size,40);	        
	        .left{
	          width: 4em;
	          .px2rem (padding-left,30);
	          img{
	          	display: block;
	          	width: 16%;
	          }	          
	        }
	        .center{
	            flex:1;	           
	            text-align: center;
	        }
	        .right{
	          width: 4em;
	          text-align: right;
	          .px2rem (padding-right,30);
	          img{	          	
	          	width: 26%;
	          }
	        }
		}
		.main{			
			.sumss{				
				.px2rem (margin-top,114);				
				.iconTex{					
					.sum{						
						.px2rem (padding-top,22);						
						text-align: center;
						.px2rem (font-size,36);
						.px2rem (line-height,54);
						p{
							color: #0076FF;
							text-align: left;
							.px2rem (margin-left,108);
							.px2rem (margin-bottom,30);
						}
						span{
							color:rgba(0,0,0,0.6);
							font-weight: normal;
						}
					}
				}
				.detail{
					.px2rem (font-size,32);
					display: flex;
					.verImg1{
						flex:1;
						.px2rem (padding-top,44);
			        	.px2rem (padding-bottom,88);
			        	p{
			        		display: flex;
			        		img{
				        		.px2rem (padding-left,38);
				        		.px2rem (padding-right,20);			        		
				        		.px2rem (height,56);
				        		.px2rem (width,58);
				        	}
				        	span{
				        		.px2rem (padding-top,10);
				        	}
			        	}
					}			        
			        .verImg2{
						width: 9em;
						.px2rem (padding-top,44);
			        	.px2rem (padding-bottom,88);
			        	p{
			        		display: flex;
			        		img{
				        		.px2rem (padding-left,38);
				        		.px2rem (padding-right,20);			        		
				        		.px2rem (height,56);
				        		.px2rem (width,58);
				        	}
				        	span{
				        		.px2rem (padding-top,10);
				        	}
			        	}
					}			        
				}
			}			
			.iconList{				
				border-top: 1px solid #979797;
				font-weight: normal;
				position: relative;
				.title{
					.px2rem (font-size,34);					
					position: absolute;
					left:40%;
					top: -2%;
					background: #f7f7f9;
					.px2rem (padding-left,24);
					.px2rem (padding-right,24);
				}
				.listMenu{
					display: flex;
					flex-direction: column;
			        li{
			        	.px2rem (margin-top,50);
			        	display: flex;			        	
			        	.px2rem (padding-bottom,33);
			        	border-bottom: 1px solid #979797;			        	
			        	.picTex{
							flex:2;
							.px2rem (padding-left,30);
							figure{
								.px2rem (font-size,30);
								display: flex;
								img{
									display: block;
									.px2rem (height,49);
								}
								span{
									.px2rem (padding-left,30);
									.px2rem (padding-top,10);
								}
							}
							article{
								.px2rem (padding-top,20);								
								time{									
									i{
										.px2rem (padding-left,10);
									}
								}
							}
			        	}
			        	p{
			        		flex:1;
			        		text-align: right;
			        		.px2rem (padding-right,40);
							.px2rem (padding-top,22);
							.px2rem (font-size,30);
			        	}
				}
			}
			.kong{
				.px2rem (height,180);
			}
		}
	}
}

</style>